<template>
	<div id="app">
		<my-head></my-head>
		<el-rate v-model="value3" show-text @change="rateChange">
		</el-rate>
		<el-checkbox :cities="cities1" v-on:changeData="fun1"></el-checkbox>
		<!--监听el-checkbox的changeData事件，该事件是checkbox的checked value变化时触发的，触发自己的fun1事件-->
		<el-checkbox :cities="cities2" v-on:changeData="fun2"></el-checkbox>
		<!--监听el-checkbox的changeData事件，该事件是checkbox的checked value变化时触发的，触发自己的fun2事件-->
		<img-list></img-list>
		<my-button :msg="msg" v-on:btnClickEvent="doSth" secMsg="xxxx" ref="button"></my-button>
		<my-nav ref="nav"></my-nav>
		<keep-alive>
			<router-view class="main_content"></router-view>
		</keep-alive>
		<my-foot :copyright="copyright"></my-foot>
	</div>
</template>
<script>
	import myHead from 'components/header';
	import myNav from 'components/nav';
	import myMask from 'components/mask';
	import myLogin from 'components/login';
	import myFoot from 'components/foot';
	import elCheckbox from 'components/el-checkbox'
	import myButton from 'components/button'
	import imgList from 'components/img-list'
	import request from 'superagent'
	import jsonp from 'superagent-jsonp'
	import ajaxData from '../static/data/data.json'
	import bus from './bus.js'
	//以上全为组件导入或者依赖导入，跟reqiure类似，按需引用
	export default {
		name: 'app',
		components: {
			'my-head': myHead,
			'my-nav': myNav,
			'my-mask': myMask,
			'my-login': myLogin,
			'my-foot': myFoot,
			'el-checkbox': elCheckbox,
			'my-button': myButton,
			'img-list': imgList,
		},
		//相当于给组件取别名
		data() {
			return {
				courseData: ajaxData.difficult.course,
				value3: null,
				cities1: ['111', '222'],
				cities2: ['2222', '3333'],
				msg: "hello",
				copyright: "Powered By KI-WI @2017",
			};
		},
		//工厂函数返回实例，不能直接写data:{}
		methods: {
			doSth: function() {
				alert('监听子组件点击事件')
			},
			rateChange: function(value) {
				console.log(value)
			},
			fun1: function() {
				alert('111')
			},
			fun2: function() {
				alert('222')
			}
		},
		mounted: function() {
			//			console.log(this.$refs.nav.$data.items[0].ad)
			this.msg = 'world' //父组件不要直接去改子组件的属性，如本句改成this.$refs.button.$props.msg = 'world'是错误的
		},
		watch: {
			cities: function() {
				console.log(this.cities)

			}
			//
		}
	}
</script>
<style scoped>
	ul {
		list-style: none;
	}
	
	a {
		text-decoration: none;
	}
	
	#app {
		font-family: "Microsoft Yahei", sans-serif;
	}
	
	.main_content {
		position: relative;
		top: 80px;
		width: 100%;
		margin-bottom: 135px;
		padding-left: 248px;
		box-sizing: border-box;
	}
	
	@media screen and (max-width: 964px) {
		.main_content {
			padding-left: 0;
		}
	}
	
	.qui-btn {
		margin-left: 400px;
		margin-top: 20px;
	}
	
	.el-rate {
		margin-top: 100px;
		margin-left: 280px;
	}
</style>